<template>
  <div class="comment">
    <!-- 评论列表 -->
    <van-list @load='onLoad' v-model="loading" :finished="finished" finished-text="没有更多了">
      <van-cell v-for='item in list' :key='item.com_id.toString()'>
        <div class="item van-hairline--bottom van-hairline--top">
          <van-image round width="1rem" height="1rem" fit="fill" :src="item.aut_photo" />
          <div class="info">
            <p>
              <span class="name">{{item.aut_name}}</span>
              <span style="float:right">
                <span class="van-icon van-icon-good-job-o zan"></span>
                <span class="count">{{item.like_count}}</span>
              </span>
            </p>
            <p>{{item.content}}</p>
            <p>
              <span class="time">{{item.pubdate|timeFormat}}</span>&nbsp;
              <van-tag plain @click="showReply=true">{{item.reply_count}} 回复</van-tag>
            </p>
          </div>
        </div>
      </van-cell>
    </van-list>
    <!-- 底部输入框 -->
    <div class="reply-container van-hairline--top">
      <van-field v-model="value" placeholder="写评论...">
        <span @click='handleSubmit' class="submit" slot="button">提交</span>
      </van-field>
    </div>
  </div>
</template>
<script>
import { getComments, comment } from '@/api/article.js'

export default {
  name: 'ArticleComment',
  props: {
    articleId: {
      type: String
    }
  },
  data () {
    return {
      // 评论内容
      value: '',
      // 加载状态
      loading: false,
      // 加载完成的标志
      finished: false,
      // 分页偏移量
      offset: null,
      // 评论列表数据
      list: []
    }
  },
  methods: {
    async handleSubmit () {
      // 发表评论
      try {
        // 发表评论
        await comment({
          target: this.articleId,
          content: this.value
        })
        // 需要手工修改状态位为true(防止一页数据不够)
        this.loading = true
        // 刷新列表
        this.list = []
        this.onLoad()
        // 清空表单
        this.value = ''
      } catch {
        this.$toast.fail('发表评论失败')
      }
    },
    async onLoad () {
      // 分页加载评论数据
      const ret = await getComments(this.articleId, this.offset)
      this.list.push(...ret.data.results)
      this.loading = false
      // 判断结束的条件
      if (ret.data.last_id === ret.data.end_id) {
        // 没有更多数据了
        this.finished = true
      } else {
        // 把下次查询的起始id记录一下
        this.offset = ret.data.last_id
      }
    }
    // async getComments () {
    //   try {
    //     const ret = await getComments(this.articleId, this.offset)
    //     this.list = ret.data.results
    //   } catch {
    //     this.$toast.fail('获取评论数据失败')
    //   }
    // }
  },
  created () {
    // this.getComments()
  }
}
</script>
<style scoped lang="less">
.comment {
  margin-top: 10px;
  /deep/ .item {
    display: flex;
    padding: 10px 0;
    .info {
      flex: 1;
      padding-left: 10px;
      .name{
        color:#069;
      }
      .zan{
        vertical-align:middle;
        padding-right:2px;
      }
      .count{
        vertical-align:middle;
        font-size:10px;
        color: #666;
      }
      .time{
        color: #666;
      }
      p {
        padding: 5px 0;
        margin: 0;
      }
    }
  }
  /deep/ .van-button:active::before {
    background: transparent;
  }
}
.reply-container {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 44px;
  width: 100%;
  background: #f5f5f5;
  z-index: 9999;
  .submit {
    font-size: 12px;
    color: #3296fa;
  }
}
</style>
